<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { CustomMouseMenu } from '@/plugins/directive/contextmenu';
import { ElMessageBox, ElMessage } from 'element-plus';
import useStore from '@/store';
import { MasterEnum } from '@/enums';
import { LicenseEnum } from '@/enums/licence';
import { props } from './actionLog';
import { WindowType } from '@/types/global/window';
defineOptions({ name: 'ActionLog' });
defineProps(props);
const tableRef = ref(null);
const loading = ref(true);
const actionLogs = ref(null);
const warehouses = ref(null);
const lenses = ref(null);
const actionLogTypes = ref(null);
const actionLogReasons = ref(null);
const actionLogStatuses = ref(null);
const currentRow = ref(null);
const totalCount = ref(0);
const daterange = ref('');
const params = reactive({
  pageIndex: 1,
  pageSize: 20,
  query: {
    actionLogNumber: null,
    relationNumber: null,
    createdByName: null,
    createdOnBegin: null,
    createdOnEnd: null,
    warehouseId: null,
    lensId: null,
    type: '',
    status: '0',
    relationType: null,
    reason: null,
  },
});

const handleTableRowClick = row => {
  currentRow.value = row;
};
const remove = () => {
  if (!currentRow.value) {
    ElMessage.error('请选择要删除的销售镜种!');
    return;
  }
  let confirmMessage = '是否删除选中的模块?';
  // if (ids.constructor === Number) {
  //   confirmMessage = '是否删除模块（' + name + '）?';
  //   ids = [ids];
  // }

  ElMessageBox.confirm(confirmMessage, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // window.$api.module.remove(ids).then(res => {
      //   ElMessage.success('删除成功');
      //   query();
      // });
    })
    .catch(() => {});
};

/** 加载基础数据,字典等 */
const init = async () => {
  await window.$api.warehouse.getWarehouses().then(res => {
    warehouses.value = res.data;
  });
  await window.$api.lens.getLenses().then(res => {
    lenses.value = res.data;
  });
  await window.$api.common.getActionLogTypes().then(res => {
    actionLogTypes.value = res.data;
  });
  await window.$api.common.getActionLogReasons().then(res => {
    actionLogReasons.value = res.data;
  });
  await window.$api.common.getActionLogStatuses().then(res => {
    actionLogStatuses.value = res.data;
  });
};

const query = async () => {
  loading.value = true;
  if (daterange.value) {
    params.query.createdOnBegin = daterange.value[0];
    params.query.createdOnEnd = daterange.value[1];
  }
  await window.$api.actionLog.query(params).then(res => {
    actionLogs.value = res.data.list;
    params.pageIndex = res.data.pageIndex;
    params.pageSize = res.data.pageSize;
    totalCount.value = res.data.totalCount;
    loading.value = false;
  });
};
const add = () => {
  const window: WindowType = { name: 'StockForm', component: 'StockForm', label: '库存镜种添加', icon: 'edit', width: 700, height: 500 };
  useStore.window.windowAdd(window);
};
const check = () => {
  let rows = tableRef.value.getSelectionRows();
  if (rows.length <= 0) {
    ElMessage.error('请选择出入库记录!');
    return;
  }
  let ids = rows.map(item => {
    return item.id;
  });
  ElMessageBox.confirm('是否审核选中的出入库记录', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      window.$api.actionLog.check(ids).then(res => {
        ElMessage.success('审核成功');
        query();
      });
    })
    .catch(() => {});
};
const receive = () => {
  const window: WindowType = {
    name: 'ReceiveOrderForm',
    component: 'ReceiveOrderForm',
    label: '订单收货',
    icon: 'edit',
    width: 700,
    height: 500,
    callBack: () => query(),
  };
  useStore.window.windowAdd(window);
};
const showXYTable = id => {
  const window: WindowType = { name: 'XYTableForm', component: 'XYTableForm', icon: 'edit', width: 700, height: 500, params: { id: id, type: 2 } };
  useStore.window.windowAdd(window);
};
const exportExcel = () => {
  loading.value = true;
  window.$api.actionLog.export(params).then(res => {
    loading.value = false;
  });
};
onMounted(() => {
  init();
  query();
});
</script>

<template>
  <windows-window :window="window" class="lens">
    <template #tabs>
      <el-tabs type="border-card" v-model="params.query.status" @tab-change="query">
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已完成" name="2"></el-tab-pane>
      </el-tabs>
    </template>
    <template #button>
      <windows-button-group size="18">
        <windows-button icon="ri-folder-received-line" :license="LicenseEnum.SYS_ACTIONLOG_ORDERRECEIVE" @click="receive">订单收货</windows-button>
        <windows-button icon="fluent-contract-down-left-28-regular" @click="exportExcel" split>导出</windows-button>
        <windows-button icon="fluent-mail-inbox-checkmark-24-regular" :license="LicenseEnum.SYS_ACTIONLOG_CHECK" @click="check" v-if="params.query.status == '0'">审核</windows-button>
      </windows-button-group>
    </template>
    <template #search>
      <el-form ref="form" :model="params.query" label-width="auto" label-position="right" size="default">
        <el-row>
          <el-col :span="12">
            <el-form-item label="出入库编号">
              <el-input v-model="params.query.actionLogNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联编号">
              <el-input v-model="params.query.relationNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库">
              <el-select clearable filterable v-model="params.query.warehouseId">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="镜种">
              <el-select clearable filterable v-model="params.query.lensId">
                <el-option v-for="item in lenses" :key="item.id" :label="item.factoryLensCode" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出入库日期">
              <el-date-picker v-model="daterange" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作人">
              <el-input v-model="params.query.createdByName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出入库类型">
              <el-radio-group clearable v-model="params.query.type">
                <el-radio label="">全部</el-radio>
                <el-radio :label="item.value" v-for="item in actionLogTypes">{{ item.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出入库原因">
              <el-select clearable v-model="params.query.reason">
                <el-option v-for="item in actionLogReasons" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-button type="primary" icon="Search" @click="query">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <el-table ref="tableRef" :data="actionLogs" style="width: 100%" height="100%" highlight-current-row v-loading="loading" @row-click="handleTableRowClick">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="80" label="序号" align="center" />
      <el-table-column prop="actionLogNumber" label="出入库编号" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="状态" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="relationNumber" label="关联编号" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="relationType" label="订单类型" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="出入库类型" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="reason" label="出入库原因" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="warehouseCode" label="仓库代码" align="center" minWidth="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="warehouseName" label="仓库名称" align="center" minWidth="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="lensCode" label="镜种代码" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="lensName" label="镜种名称" align="center" minWidth="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="degreesType" label="度数类型" align="center" minWidth="80"></el-table-column>
      <el-table-column prop="qty" label="总片数" align="center" minWidth="80">
        <template #default="scope">
          <el-link type="primary" :underline="false" @click="showXYTable(scope.row.id)">{{ scope.row.qty }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" minWidth="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createdOn" label="创建日期" width="150" align="center"></el-table-column>
      <el-table-column prop="createdByName" label="创建人" width="100" align="center"></el-table-column>
      <el-table-column prop="checkedOn" label="审核日期" width="150" align="center"></el-table-column>
      <el-table-column prop="checkedByName" label="审核人" align="center" width="100"></el-table-column>
      <el-table-column prop="finishOn" label="完成日期" width="150" align="center"></el-table-column>
      <el-table-column prop="finishByName" label="完成人" align="center" width="100"></el-table-column>
    </el-table>
    <template #pagination>
      <el-pagination
        v-model:currentPage="params.pageIndex"
        v-model:page-size="params.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        small
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="query"
        @current-change="query"
      />
    </template>
  </windows-window>
</template>

<style scoped lang="scss">
.el-tree {
  width: 180px;
}
</style>
